import React, { Component, Fragment } from 'react';
import { Card } from 'antd';
import {
  Row, Col,
} from 'antd';
import NengyuanxiaohaoLeftForm from './components/nengyuanxiaohao/LeftForm';
import NengyuanxiaohaoResult from './components/nengyuanxiaohao/Result';

import LaodongbaochouLeftForm from './components/laodongbaochou/LeftForm';
import LaodongbaochouResult from './components/laodongbaochou/Result';

import MeixiaoshichengbenguanliLeftForm from './components/meixiaoshichengbenguanli/LeftForm';
import MeixiaoshichengbenguanliResult from './components/meixiaoshichengbenguanli/Result';


import styles from './index.less';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nengyuanxiaohaoResult: 0,
      laodongbaochouResult: 0,
      meixiaoshichengbenguanliResult: 0,
    };
  }

  render() {
    const that = this;
    const {
      nengyuanxiaohaoResult,
      laodongbaochouResult,
      meixiaoshichengbenguanliResult,
    } = this.state;

    // 能源消耗成本
    const nengyuanxiaohaoLeftFormProps = {
      handleSubmit(value) {
        that.setState({
          nengyuanxiaohaoResult: value.gasUsagePerHour * value.price * 1.13, // 1.1~1.15
        });
      },
    };
    const nengyuanxiaohaoResultProps = {
      result: nengyuanxiaohaoResult,
    };

    // 劳动报酬
    const laodongbaochouLeftFormProps = {
      handleSubmit(value) {
        if(value.technologicalProductivity) {
          that.setState({
            laodongbaochouResult: value.paymentPerHour / value.technologicalProductivity,
          });
        }
      },
    };

    const laodongbaochouResultProps = {
      result: laodongbaochouResult,
    };

    // 每小时成本管理
    const meixiaoshichengbenguanliLeftFormProps = {
      handleSubmit({ managementFee, tractorPower, totalPower, workHoursPerYear }) {
        // {managementFee: 122, tractorPower: 1, totalPower: 2, workHoursPerYear: 100}
        that.setState({
          meixiaoshichengbenguanliResult: managementFee * tractorPower / (totalPower * workHoursPerYear),
        });
      },
    };

    const meixiaoshichengbenguanliResultProps = {
      result: meixiaoshichengbenguanliResult,
    };

    return (
      <Fragment>
        <Card bordered={false} title="能源消耗成本">
          <Row>
            <Col xs={14}>
              <NengyuanxiaohaoLeftForm {...nengyuanxiaohaoLeftFormProps} />
            </Col>
            <Col xs={8} offset={2} style={{ height: '100%' }}>
              <NengyuanxiaohaoResult {...nengyuanxiaohaoResultProps} />
            </Col>
          </Row>
        </Card>

        <Card bordered={false} title="劳动报酬成本" style={{ marginTop: 12 }}>
          <Row>
            <Col xs={14}>
              <LaodongbaochouLeftForm {...laodongbaochouLeftFormProps} />
            </Col>
            <Col xs={8} offset={2} style={{ height: '100%' }}>
              <LaodongbaochouResult {...laodongbaochouResultProps} />
            </Col>
          </Row>
        </Card>

        <Card bordered={false} title="拖拉机小时成本管理" style={{ marginTop: 12 }}>
          <Row>
            <Col xs={14}>
              <MeixiaoshichengbenguanliLeftForm {...meixiaoshichengbenguanliLeftFormProps} />
            </Col>
            <Col xs={8} offset={2} style={{ height: '100%' }}>
              <MeixiaoshichengbenguanliResult {...meixiaoshichengbenguanliResultProps} />
            </Col>
          </Row>
        </Card>
      </Fragment>
    );
  }
}

export default Index;
